<template>
  <!-- #ifdef H5 -->
    <mtitles  title="AI点单" bgColor="#56BF7A" :delta='3' color="#fff" isBack></mtitles>
    <!-- #endif -->
	<view class="container-box intlh">
		<lineUnit ref="condit" @confirm="conditConfirm" isShow></lineUnit>
		<view class="topSec padding-lr-sm p_rlt padding-top">
			<view class="mainTips bgz flex align-center text-norange">
				<text class="acon-a-tishi1 macon padding-lr-sm"></text>
				<view class="flex-sub">请留意叫号信息 , 过号作废需重新取号</view>
			</view>
		</view>
		<view class="p_rlt mainBox">
			<view v-if="0" class="empty text-acenter text-lg">
				暂无排队
			</view>
			<view>
				<view class="duiactBox flex flex-direction justify-center text-center">
					<view class="padding-top">
						<view class="mnumber p_rlt d_ib text-ngreen">
							168
							<view class="mtips text-white text-acenter text-df">
								3人组
							</view>
						</view>
					</view>
					<view class="text-center text-ngreen padding-top-sm">
						排队号
					</view>
				</view>
				<view class="list text-lg padding-left-xl padding-bottom-lg">
					<view class="flex align-center padding-tb-sm">
						<view class="flex-sub text-c9">
							<view class="d_ib title">
								项 目
							</view>
						</view>
						<view class="dis">
							按摩/足浴
						</view>
					</view>
					<view class="flex align-center padding-tb-sm">
						<view class="flex-sub text-c9">
							<view class="d_ib title">
								排队状态
							</view>
						</view>
						<view class="dis">
							前面还有2组在等待
						</view>
					</view>
					<view class="flex align-center padding-tb-sm">
						<view class="flex-sub text-c9">
							<view class="d_ib title">
								预估时间
							</view>
						</view>
						<view class="dis">
							＞60分钟
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="od_sub_btn_section">
			<view  class="flex justify-end">
				<view class="btn_com todetail" @click.stop="tapToHome()">回到首页</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad } from '@dcloudio/uni-app';
	import lineUnit from './lineComponments/lineUnit/lineUnit.vue';
	const condit=ref()
	const tapToHome=()=>{
		uni.switchTab({
			url: '/pages/index/home/home',
			success: () => {
			}
		});
	}
	const conditConfirm=()=>{
		
	}
</script>

<style lang="scss">
.topSec{
	width: 100%;
	height: 30vh;
	background: #56BF7A;
	z-index: 1;
	
}
.duiactBox{
	width: 100%;
	height: 300rpx;
}
.mnumber{
		font-size: 110rpx;
}
.mtips{
	position: absolute;
	right: -106rpx;
	top: -20rpx;
	min-width: 110rpx;
	height: 40rpx;
	padding: 0 6rpx;
	border-radius: 40rpx;
	background: #56BF7A;
}
.mainTips{
	line-height: 60rpx;
	border-radius: 8rpx;
	background: #FBF0E0;
}
.mainBox{
	width: calc(100vw - 40rpx);
	min-height: 500rpx;
	border-radius: 16rpx;
	background: #FFF;
	box-shadow: 0px 2px 18rpx 0px rgba(0, 0, 0, 0.08);
	z-index: 2;
	left: 20rpx;
	top: -252rpx;
	.dis{
		min-width: 300rpx;
	}
}
.empty{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 16rpx;
	background: #fff;
}
.od_sub_btn_section {
	line-height: 1;
	// box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.05);
	position: fixed;
	z-index: 3;
	left: 0;
	bottom: 0rpx;
	width: 100%;
	padding: 20rpx 50rpx 40rpx 50rpx;
	// height: 100rpx;
	color: #fff;
	// background-color: #fff;
	overflow: hidden;
	.payBtn {
		width: 200rpx;
		height: 100rpx;
		line-height: 101rpx;
		background-color: #56bf7a;
		border-radius: 0 100rpx 100rpx 0;
		font-size: 32rpx;
	}
	.btn_com {
		height: calc(100% - 2px);
		// border: 2rpx solid #56BF7A;
		text-align: center;
		font-size: 28rpx;
		line-height: 101rpx;
		border-radius: 100rpx;
	}
	.tohome {
		width: 272rpx;
		color: #56bf7a;
		&::after {
			border: 1px solid #56bf7a;
		}
	}
	.todetail {
		width: 340rpx;
		color: #fff;
		background-color: #56bf7a;
	}
}
</style>
